<template>
  <div class="department-container">
    <el-card>
      <!-- 具体页面结构 -->
      <el-tabs v-model="activeName">
        <el-tab-pane label="组织结构" name="first" />
      </el-tabs>

      <div class="box">
        <!-- 标题 -->
        <el-row
          type="flex"
          justify="space-between"
          align="middle"
          style="height: 40px; border-bottom:1px solid #ccc;"
        >
          <el-col :span="20">
            <div>
              <svg-icon style="font-size:20px;margin-right:5px" icon-class="crown" />
              <span>武汉江夏新锐科创有限公司</span>
            </div>
          </el-col>
          <el-col :span="4">
            <el-col :span="12">
              <div style="font-size: 14px">负责人</div>
            </el-col>
            <el-col :span="12">
              <el-dropdown>
                <span class="el-dropdown-link">
                  操作<i class="el-icon-arrow-down el-icon--right" />
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item @click.native="dialogVisible = true">
                    添加子部门
                  </el-dropdown-item>
                  <el-dropdown-item>
                    查看部门
                  </el-dropdown-item>

                </el-dropdown-menu>
              </el-dropdown>
            </el-col>
          </el-col>
        </el-row>

        <!-- 树形组件列表 -->
        <el-tree
          :data="data"
          :props="defaultProps"
          :default-expand-all="true"
          style="height: 650px"
          @node-click="handleNodeClick"
        >
          <template slot-scope="scope">
            <el-row
              type="flex"
              justify="space-between"
              align="middle"
              style="width: 100%"
            >
              <el-col :span="20">
                <svg-icon style="font-size:20px;margin-right:10px" icon-class="human" />
                <span>{{ scope.data.name }}</span>
              </el-col>
              <el-col :span="4">
                <el-row type="flex" justify="end">
                  <!-- 两个内容 -->
                  <el-col style="font-size: 14px">{{
                    scope.data.manager
                  }}</el-col>
                  <el-col>
                    <!-- 下拉菜单 element -->
                    <el-dropdown>
                      <span> 操作<i class="el-icon-arrow-down" /> </span>
                      <!-- 下拉菜单 -->
                      <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item @click.native="addDep(scope.data.id)">添加子部门</el-dropdown-item>
                        <el-dropdown-item
                          @click.native="editDep(scope.data)"
                        >编辑部门</el-dropdown-item>
                        <el-dropdown-item @click.native="delDep(scope.data.id)">删除部门</el-dropdown-item>
                      </el-dropdown-menu>
                    </el-dropdown>
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
          </template>
        </el-tree>
      </div>
    </el-card>

    <!-- 添加子部门对话框 -->
    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      width="40%"
      :before-close="handleClose"
    >
      <dept-dialog
        v-if="dialogVisible"
        ref="dept"
        :pid="pid"
        :row="row"
        :is-edit="isEdit"
        @closeDialog="closeDialog"
      />
    </el-dialog>
  </div>
</template>

<script>
import { getDepartments, delDepartment } from '@/api/departments.js'
import { toDo2 } from '@/list/arg.js'
import deptDialog from './deptDialog.vue'
export default {
  components: {
    deptDialog
  },
  data() {
    return {
      activeName: 'first',
      data: [
        {
          label: '一级 1',
          children: [
            {
              label: '二级 1-1',
              children: [
                {
                  label: '三级 1-1-1'
                }
              ]
            }
          ]
        },
        {
          label: '一级 2',
          children: [
            {
              label: '二级 2-1',
              children: [
                {
                  label: '三级 2-1-1'
                }
              ]
            },
            {
              label: '二级 2-2',
              children: [
                {
                  label: '三级 2-2-1'
                }
              ]
            }
          ]
        },
        {
          label: '一级 3',
          children: [
            {
              label: '二级 3-1',
              children: [
                {
                  label: '三级 3-1-1'
                }
              ]
            },
            {
              label: '二级 3-2',
              children: [
                {
                  label: '三级 3-2-1'
                }
              ]
            }
          ]
        }
      ],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      dialogVisible: false,
      pid: '',
      row: {},
      isEdit: false
    }
  },
  computed: {
    title() {
      return this.isEdit ? '编辑' : '添加'
    }
  },
  created() {
    this.getDep()
    // console.log(this)
  },
  methods: {
    handleNodeClick(data) {
      // console.log(data)
    },
    // 获取数据
    async getDep() {
      const res = await getDepartments()
      // console.log(res.data.depts)
      // 双重for循环只能解决两层的数据
      // const map = {}
      // const arr = res.data.depts
      // arr.forEach((ele) => {
      //   map[ele.id] = ele
      //   ele.children = []
      //   // console.log(ele)
      // })
      // console.log(map)
      // const newArr = []
      // arr.forEach((item) => {
      //   // console.log(item)
      //   // console.log(map[item.pid])
      //   if (item.pid) {
      //     map[item.pid].children.push(item)
      //   } else {
      //     newArr.push(item)
      //   }
      // })
      // // console.log(newArr)
      // this.data = newArr
      //  递归的写法

      this.data = toDo2(res.data.depts, '')
      // console.log(this.data)
    },
    // 添加数据
    addDep(pid) {
      // console.log('1')
      this.dialogVisible = true
      console.log(pid)
      this.pid = pid
    },
    // 根据id删除数据
    async delDep(pid) {
      // console.log(pid)
      const result = await this.$confirm('删除该条数据吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(e => e)
      // console.log(result)
      if (result === 'confirm') {
        const res = await delDepartment(pid)
        // console.log(res)
        if (res.code === 10000) this.getDep()
      }
    },
    // 关闭对话框
    async handleClose(done) {
      // console.log(this.$refs.dept)
      this.$refs.dept.close()
      this.isEdit = false
      done()
    },
    // 成功/取消关闭对话框功能
    closeDialog() {
      // console.log(1)
      this.dialogVisible = false
      this.getDep()
    },
    // 编辑部门
    editDep(row) {
      // console.log(row)
      this.dialogVisible = true
      this.row = row
      this.isEdit = true
    }
  }
}
</script>
<style lang="scss" scoped>
.department-container {
  padding: 30px;
  .box {
    padding: 30px 50px;
    font-weight: bolder;
    font-size: 14px;

  }
 ::v-deep.el-tree-node__content{
      height: 40px ;
    }

}
</style>
